import CollapseDemo from "./components/CollapseDemo";
import CascaderDemo from "./components/CascaderDemo";
import ButtonDemo from "./components/ButtonDemo";
import styles from "./App.module.scss";
import FloatingBubbleDemo from "./components/FloatingBubbleDemo";
import { DemoList, GlobalContext } from "./GlobalContext";
import { useState } from "react";

/** 根据组件key映射对应的组件demo */
function renderDemo(componentName: string) {
  return {
    'Collapse': <CollapseDemo />,
    'Cascader': <CascaderDemo />,
    'Button': <ButtonDemo />,
  }[componentName] || <div>未配置</div>;
}

function App() {
  const [componentName, setComponentName] = useState<DemoList>("Cascader");

  return (
    <GlobalContext.Provider value={{ componentName, setComponentName }}>
      <div className={styles.topTip}>当前预览组件：{componentName}</div>
      <div className={styles.app}>
        {/* 渲染对应组件demo */}
        { renderDemo(componentName) }

        {/* 悬浮球切换需要预览的组件 */}
        <FloatingBubbleDemo></FloatingBubbleDemo>
      </div>
    </GlobalContext.Provider>
  );
}

export default App;
